<template>
  <div>
    <!-- 筛选条件 -->
    <el-form
      style="margin: 20px; padding: 10px"
      size="mini"
      :inline="true"
      :model="selectdata"
      label-width="90px"
    >
      <el-form-item label="理赔单号">
        <el-input v-model="selectdata.productName"></el-input>
      </el-form-item>

      <el-form-item label="手机号">
        <el-input v-model="selectdata.userAccount"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          type="date"
          v-model="selectdata.createTime"
          value-format="yyyy-MM-dd"
          placeholder="保险失效日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="理赔状态:">
        <el-select
          v-model="selectdata.applyType"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item, index) in applyTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button size="mini" type="primary" @click="getselectTrainCareList()"
        >查询</el-button
      >
    </el-form>

    <!-- tabel表格 -->
    <el-table
      size="mini"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      :data="tableList"
      id="tableTop"
      border
      stripe
    >
      <el-table-column label="理赔单号 " prop="careNumber"></el-table-column>
      <el-table-column label="理赔标题" prop="careTitle"></el-table-column>
      <el-table-column label="手机号" prop="userAccount"></el-table-column>

      <el-table-column label="用户名" prop="userName"></el-table-column>

      <el-table-column label="申请类型" prop="applyType">
        <template slot-scope="scope">
          <template v-if="scope.row.applyType == 'delay'">延误</template>
          <template v-if="scope.row.applyType == 'abolish'">取消</template>
          <template v-if="scope.row.applyType == 'commodity'">商品</template>
        </template>
      </el-table-column>
      <el-table-column label="理赔状态" prop="careStatus">
        <template slot-scope="scope">
          <template v-if="scope.row.careStatus == 'wsh'">未审核</template>
          <template v-if="scope.row.careStatus == 'shsb'">审核失败</template>
          <template v-if="scope.row.careStatus == 'shbtg'">审核不通过</template>
          <template v-if="scope.row.careStatus == 'dlp'">已审核待理赔</template>
          <template v-if="scope.row.careStatus == 'jjlp'">拒绝理赔</template>
          <template v-if="scope.row.careStatus == 'lpz'">理赔中</template>
          <template v-if="scope.row.careStatus == 'lpcg'">理赔成功</template>
          <template v-if="scope.row.careStatus == 'lpsb'">理赔失败</template>
        </template>
      </el-table-column>

      <el-table-column label="航班号" prop="flightNumber"></el-table-column>
      <el-table-column label="航班日期" prop="flightDate"></el-table-column>

      <el-table-column label="出发机场" prop="startCityId"></el-table-column>
      <el-table-column label="到达机场" prop="endCityId"></el-table-column>
      <el-table-column label="航班状态" prop="flightStatus"></el-table-column>

      <el-table-column label="登机牌" prop="boardingUrl">
        <template slot-scope="scope">
          <img :src="baseURL + scope.row.boardingUrl" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column label="机场证明" prop="proofUrl">
        <template slot-scope="scope">
          <img :src="baseURL + scope.row.proofUrl" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column label="身份证正面" prop="cardFrontUrl">
        <template slot-scope="scope">
          <img :src="baseURL + scope.row.cardFrontUrl" width="40" height="40" />
        </template>
      </el-table-column>
      <el-table-column label="身份证反面" prop="cardBackUrl">
        <template slot-scope="scope">
          <img :src="baseURL + scope.row.cardBackUrl" width="40" height="40" />
        </template>
      </el-table-column>

      <el-table-column label="操作" width="260px" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editmethod(scope.row)"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.careStatus != 'dlp'"
            @click="auditMethod(scope.row)"
            >审核</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-if="scope.row.careStatus == 'dlp'"
            @click="grantMethod(scope.row)"
            >理赔</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹窗 -->
    <el-dialog
      title="航旅关怀修改"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="70%"
      center
    >
      <el-form
        :model="editData"
        :rules="editDataRules"
        ref="editData"
        label-width="110px"
        class="demo-ruleForm"
      >
        <div style="display: flex">
          <el-form-item label="理赔单号" prop="name">
            <el-input
              size="mini"
              style="width: 200px"
              v-model="editData.careNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="理赔标题" prop="name">
            <el-input
              size="mini"
              style="width: 200px"
              v-model="editData.careTitle"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="手机号" prop="name">
            <el-input
              size="mini"
              style="width: 200px"
              v-model="editData.userAccount"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="name">
            <el-input
              size="mini"
              style="width: 200px"
              v-model="editData.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请类型" prop="name">
            <el-radio-group v-model="editData.applyType">
              <el-radio v-model="editData.applyType" label="delay"
                >延误</el-radio
              >
              <el-radio v-model="editData.applyType" label="abolish"
                >取消</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="理赔状态 " prop="name" size="mini">
            <el-select v-model="editData.careStatus" style="width: 200px">
              <el-option label="未审核" value="wsh"></el-option>
              <el-option label="审核失败" value="shsb"></el-option>
              <el-option label="已审核待理赔" value="dlp"></el-option>
              <el-option label="拒绝理赔" value="jjlp"></el-option>
              <el-option label="理赔中" value="lpz"></el-option>
              <el-option label="理赔成功" value="lpcg"></el-option>
              <el-option label="理赔失败" value="lpsb"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="航班号" prop="name">
            <el-input
              size="mini"
              style="width: 200px"
              v-model="editData.flightNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="航班日期" prop="name">
            <el-date-picker
              style="width: 200px"
              type="date"
              size="mini"
              placeholder="选择日期"
              v-model="editData.flightDate"
            ></el-date-picker>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="航班状态 " prop="name">
            <el-select
              v-model="editData.flightStatus"
              size="mini"
              style="width: 200px"
            >
              <el-option label="延误" value="delay"></el-option>
              <el-option label="取消" value="abolish"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出发机场" prop="name">
            <el-select
              size="mini"
              style="width: 200px"
              clearable
              v-model="editData.startCityId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in flightCiList"
                :key="index"
                :label="item.airportCityName"
                :value="item.airportId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="到达机场" prop="name">
            <el-select
              size="mini"
              style="width: 200px"
              clearable
              v-model="editData.endCityId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in flightCiList"
                :key="index"
                :label="item.airportCityName"
                :value="item.airportId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="延误日期" prop="name">
            <el-date-picker
              size="mini"
              type="date"
              style="width: 200px"
              v-model="editData.delayDate"
              value-format="yyyy-MM-dd"
              placeholder="保险失效日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="原定起飞时间" prop="name">
            <el-date-picker
              size="mini"
              v-model="editData.rawStartDate"
              type="datetime"
              style="width: 200px"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="延误起飞时间" prop="name">
            <el-date-picker
              size="mini"
              style="width: 200px"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="editData.delayStartDate"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="原定到达时间" prop="name">
            <el-date-picker
              size="mini"
              style="width: 200px"
              v-model="editData.rawEndDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="name">
            <el-input
              size="mini"
              v-model="editData.careRemark"
              style="width: 200px"
            ></el-input>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="登机牌" prop="name" label-width="70px">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="handleAvatarSuccessedit1"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <img
                v-if="editData.boardingUrl"
                :src="baseURL + editData.boardingUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="机场证明" prop="name" label-width="70px">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="handleAvatarSuccessedit2"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <img
                v-if="editData.proofUrl"
                :src="baseURL + editData.proofUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证正面" prop="name" label-width="90px">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="handleAvatarSuccessedit3"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <img
                v-if="editData.cardFrontUrl"
                :src="baseURL + editData.cardFrontUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证反面" label-width="90px" prop="name">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :action="imgHttpUrl"
              :on-success="handleAvatarSuccessedit4"
              list-type="picture-card"
              :on-exceed="handleExceed"
              :headers="header"
              :data="multipartFile"
            >
              <img
                v-if="editData.cardBackUrl"
                :src="baseURL + editData.cardBackUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>

        <div style="display: flex">
          <el-form-item label="审核人" prop="name">
            <el-input
              size="mini"
              disabled
              v-model="editData.auditAdminName"
            ></el-input>
          </el-form-item>
          <el-form-item label="审核时间" prop="name">
            <el-input
              size="mini"
              disabled
              v-model="editData.auditDate"
            ></el-input>
          </el-form-item>
          <el-form-item label="批款人" prop="name">
            <el-input
              size="mini"
              disabled
              v-model="editData.grantAdminName"
            ></el-input>
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item label="批款时间" prop="name">
            <el-input
              size="mini"
              disabled
              v-model="editData.grantDate"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="name">
            <el-input
              size="mini"
              disabled
              v-model="editData.createTime"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSureBtn()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审核弹窗 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialogVisible"
      :close-on-click-modal="false"
      width="35%"
      center
    >
      <el-form
        ref="auditData"
        :model="auditData"
        :rules="auditDataRules"
        label-width="80px"
      >
        <el-form-item label="审核状态 ：" prop="careStatus" label-width="100px">
          <el-radio-group v-model="auditData.careStatus">
            <!-- <el-radio label="wsh">未审核</el-radio> -->
            <el-radio label="shbtg">审核不通过</el-radio>
            <el-radio label="shtg">已审核待理赔</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditQueding('auditData')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 理赔弹窗 -->
    <el-dialog
      title="理赔"
      :visible.sync="grantDialogVisible"
      :close-on-click-modal="false"
      width="35%"
      center
    >
      <el-form
        ref="grantData"
        :model="grantData"
        :rules="grantDataRules"
        label-width="80px"
      >
        <el-form-item label="理赔状态" prop="careStatus">
          <el-radio-group v-model="grantData.careStatus">
            <el-radio label="lpcg">理赔成功</el-radio>
            <el-radio label="lpsb">理赔失败</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="grantDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="grantQueding('grantData')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片相关
      imgHttpUrl: this.$imgHttpUrl,
      baseURL: localStorage.getItem("baseUrl"),
      multipartFile: { type: "adminHead" },
      header: {
        token: localStorage.getItem("Xd_Token"),
      },

      baseURL: localStorage.getItem("baseUrl"),
      // 列表数据
      tableList: [],
      //对应优惠券列表
      correspondList: [],
      applyTypeList: [
        {
          label: "未审核",
          value: "wsh",
        },
        {
          label: "审核失败",
          value: "shsb",
        },
        {
          label: "已审核待理赔",
          value: "dlp",
        },
        {
          label: "拒绝理赔",
          value: "jjlp",
        },
        {
          label: "理赔中",
          value: "lpz",
        },
        {
          label: "理赔成功",
          value: "lpcg",
        },
        {
          label: "理赔失败",
          value: "lpsb",
        },
      ],
      //查询数据
      selectdata: {
        careNumber: "",
        applyType: "",
        userAccount: "",
        createTime: "",
        pageNo: "1",
        pageSize: "10",
      },
      // 修改弹窗
      centerDialogVisible: false,
      editData: {
        id: "",
        careNumber: "",
        careTitle: "",
        userAccount: "",
        userName: "",
        applyType: "",
        careStatus: "",
        flightNumber: "",
        flightDate: "",
        startCityId: "",
        endCityId: "",
        flightStatus: "",
        boardingUrl: "",
        proofUrl: "",
        cardFrontUrl: "",
        cardBackUrl: "",
        delayDate: "",
        rawStartDate: "",
        delayStartDate: "",
        rawEndDate: "",
        careRemark: "",
        auditAdminName: "",
        auditDate: "",
        grantAdminName: "",
        grantDate: "",
        createTime: "",
      },
      // 审核id
      auditId: null,
      auditDialogVisible: false,
      auditData: {
        careStatus: null,
      },
      auditDataRules: {
        careStatus: [{ required: true, message: "请选择", trigger: "change" }],
      },
      // 理赔id
      grantId: null,
      grantDialogVisible: false,
      grantData: {
        careStatus: null,
      },
      grantDataRules: {
        careStatus: [{ required: true, message: "请选择", trigger: "change" }],
      },
      // 总条数
      pageTotal: "",
      flightCiList: [],
    };
  },
  watch: {},

  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    handleAvatarSuccessedit1(res, file) {
      this.editData.boardingUrl = res.data[0];
    },
    handleAvatarSuccessedit2(res, file) {
      this.editData.proofUrl = res.data[0];
    },
    handleAvatarSuccessedit3(res, file) {
      this.editData.cardFrontUrl = res.data[0];
    },
    handleAvatarSuccessedit4(res, file) {
      this.editData.cardBackUrl = res.data[0];
    },
    // 分页
    handleSizeChange(val) {
      this.selectdata.pageSize = val;
      this.getselectTrainCareList();
    },
    handleCurrentChange(val) {
      this.selectdata.pageNo = val;
      this.getselectTrainCareList();
    },
    currentPage(val) {
      this.selectdata.pageNo = val;
      this.getselectTrainCareList();
    },
    //查询按钮
    getselectTrainCareList() {
      this.$axios
        .getTrainCareList({
          careNumber:
            this.selectdata.careNumber == ""
              ? null
              : this.selectdata.careNumber,
          applyType:
            this.selectdata.applyType == "" ? null : this.selectdata.applyType,
          userAccount:
            this.selectdata.userAccount == ""
              ? null
              : this.selectdata.userAccount,
          createTime:
            this.selectdata.createTime == ""
              ? null
              : this.selectdata.createTime,
          pageSize:
            this.selectdata.pageSize == "" ? null : this.selectdata.pageSize,
          pageNo: this.selectdata.pageNo == "" ? null : this.selectdata.pageNo,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.tableList = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },
    // 修改按钮
    editmethod(row) {
      console.log(row);
      this.editData.id = row;
      this.$axios
        .getFlightCareInfo({
          careId: row.id,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.editData = res.data.flightCareBO;
            this.editData.userName = res.data.userBO.userName;
            this.editData.userAccount = res.data.userBO.userAccount;
            this.centerDialogVisible = !this.centerDialogVisible;
          }
        });
    },
    // 审核按钮
    auditMethod(row) {
      this.auditId = row.id;
      this.auditDialogVisible = !this.auditDialogVisible;
    },
    auditQueding(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .auditFlightCare({
              id: this.auditId,
              careStatus: this.auditData.careStatus,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  message: "成功",
                  type: "success",
                });
                this.auditDialogVisible = !this.auditDialogVisible;
                this.getselectTrainCareList();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 理赔按钮
    grantMethod(row) {
      this.grantId = row.id;
      this.grantDialogVisible = !this.grantDialogVisible;
    },
    // 修改确定按钮
    editSureBtn() {
      this.$axios
        .updFlightCare({
          id: this.editData.id,
          careTitle: this.editData.careTitle,
          userAccount: this.editData.userAccount,
          userName: this.editData.userName,
          applyType: this.editData.applyType,
          careStatus: this.editData.careStatus,
          flightNumber: this.editData.flightNumber,
          flightDate: this.editData.flightDate,
          startCityId: this.editData.startCityId,
          endCityId: this.editData.endCityId,
          flightStatus: this.editData.flightStatus,
          boardingUrl: this.editData.boardingUrl,
          proofUrl: this.editData.proofUrl,
          cardFrontUrl: this.editData.cardFrontUrl,
          cardBackUrl: this.editData.cardBackUrl,
          delayDate: this.editData.delayDate,
          rawStartDate: this.editData.rawStartDate,
          delayStartDate: this.editData.delayStartDate,
          rawEndDate: this.editData.rawEndDate,
          careRemark: this.editData.careRemark,
        })
        .then((res) => {
          if (res.code == "00000") {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.centerDialogVisible = !this.centerDialogVisible;
            this.getselectTrainCareList();
          }
        });
    },
    grantQueding(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .grantFlightCare({
              id: this.grantId,
              careStatus: this.grantData.careStatus,
            })
            .then((res) => {
              if (res.code == "00000") {
                this.$message({
                  message: "成功",
                  type: "success",
                });
                this.grantDialogVisible = !this.grantDialogVisible;
                this.getselectTrainCareList();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 机场列表
    flightCityList() {
      this.$axios.getQueryAllCRMByIsUsed().then((res) => {
        console.log(res);
        if (res.code == "00000") {
          this.flightCiList = res.data;
          // return this.restaurants
        }
      });
    },
  },

  mounted() {
    this.getselectTrainCareList();
    this.flightCityList();
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 146px;
  height: 146px;
  display: block;
  border-radius: 3px;
}
</style>